<template>
  <div>
    <a-modal destroyOnClose="true" v-model:visible="visible" title="版本号">
      <div class="home">
        <div class="logIcon"><img src="@/assets/jh.png" alt="" /></div>
        <div class="homeInfo">
          <p>{{ systemInfo.systemName }}</p>
          <p>版本号：V2.1.4</p>
          <p>build日期：2021-12-15</p>
          <p>
            <a-button @click="onhandle">版本历史{{ flag ? '&lt;&lt;' : '>>' }}</a-button>
          </p>
        </div>
      </div>
      <div class="modalClass" v-if="flag">
        <div class="modalBott">
          <div>版本号：2.1.4</div>
          <div>1、2021-12-15 流转单类型动态设置以及选择接收人员bug修改</div>
          <div>2、2021-12-15 常规报告预览与导出</div>
        </div>
        <div class="modalBott">
          <div>版本号：2.1.3</div>
          <div>1、2021-12-13 常规统计需求更改</div>
          <div>2、2021-12-08 AI报告导出与在线预览</div>
        </div>
      </div>
      <template v-slot:footer>
        <a-button type="primary" @click="visible = false">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import ls from '@/utils/local-storage';
export default defineComponent({
  setup() {
    const visible = ref<boolean>(false);
    const showModal = () => {
      visible.value = true;
    };
    const flag = ref<boolean>(false);
    const onhandle = () => {
      flag.value = !flag.value;
    };
    const systemInfo = ref(ls.get('systemInfo'));
    return {
      flag,
      onhandle,
      visible,
      showModal,
      systemInfo,
    };
  },
});
</script>
<style lang="less" scoped>
.home {
  display: flex;

  .logIcon {
    width: 130px;
    height: 100px;
    img {
      width: 100px;
      height: 100px;
    }
  }
}
.modalClass {
  width: 100%;
  height: 250px;
  padding: 10px;
  overflow: auto;
  border: 1px solid black;
  .modalBott {
    margin-bottom: 5px;
  }
}
</style>
